<template>
	<div class="photoContrast" v-show="show">
		<el-select class="attachmentType" @change="changeType" v-model="attachmentType" placeholder="请选择附件类型">
			<el-option v-for="item in $store.state.attachment" :key="item.value" :label="item.label" :value="item.value">
			</el-option>
		</el-select>
		<photoAlbum class="photoAlbum1" ref="photoAlbum1"></photoAlbum>
		<photoAlbum class="photoAlbum2" ref="photoAlbum2"></photoAlbum>
		<i class="el-icon-close close" @click="show = false"></i>
	</div>
</template>
<script>
export default {
	name: 'attachment',
	components: {
		photoAlbum: require('./photoAlbum')
	},
	data() {
		return {
			show: false,
			attachmentType: 0,
		}
	},
	methods: {
		changeType() {
			this.$emit('submit-attachContrast');
		},
		start(_data1, _data2) {
			this.show = true;
			this.$refs.photoAlbum1.id = 'aa';
			this.$refs.photoAlbum1.photoList = _data1.photoList;
			this.$refs.photoAlbum1.photoThumbList = _data1.photoThumbList;
			this.$refs.photoAlbum1.start();

			this.$refs.photoAlbum2.id = 'bb';
			this.$refs.photoAlbum2.photoList = _data2.photoList;
			this.$refs.photoAlbum2.photoThumbList = _data2.photoThumbList;
			this.$refs.photoAlbum2.start();
		}
	},
	mounted() {

	}
}

</script>
<style lang="scss" scoped>
@import '../../assets/css/site.scss';
.photoContrast {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #404040;
	padding-top: 100px;
	z-index: 2000;
	.attachmentType {
		position: absolute;
		top: 30px;
		left: 30px;
	}
	.photoAlbum1 {
		width: 49%;
		float: left;
	}
	.photoAlbum2 {
		width: 49%;
		float: right;
	}
	.close {
		position: absolute;
		top: 30px;
		right: 30px;
		color: #fff;
		font-size: 26px;
		cursor: pointer;
	}
}

</style>
